<template>
	<div class="index">
		<div class="header" 
			id="header" 
			:style="{backgroundImage: 'linear-gradient(to right, rgb(79, 92, 104), rgb(42, 62, 69))',background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}"
			v-if="isLoadDom"
		>
			<div class="header-search"
				@click="goSearch()"
			>
				<i class="iconfont">&#xe620;</i>
				<span>请输入搜索的宝贝名称</span>
			</div>
		</div>
		<!-- nav -->
		<div class="index-nav"
			:style="{backgroundImage: 'linear-gradient(to right, rgb(79, 92, 104), rgb(42, 62, 69))',background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}"
			v-if="items.length > 1 && isLoadDom"
		>
			<ly-tab
			    v-model="selectedId"
			    :items="items"
			    :options="options"
			    @change="handleChange"
			>
			</ly-tab>
			<div class="nav-btn"
				@click="showSlide()"
				:style="{background: colorRight}"
			>
				<i class="iconfont">&#xe699;</i>
			</div>		
		</div>
		<transition name="fold">
			<div class="slide-nav"
				v-show="isSlide"
			>
				<div class="sn-header">
					<p>全部分类</p>
					<i class="iconfont"
						@click="showSlide()"
					>&#xe69a;</i>
				</div>
				<ul class="sn-content">
					<li class="sn-item"
						@click="getCate(0)"
					>
						<img src="../assets/img/all.png" />
						<p :class="{'active': currentID === 0}">全部</p>
					</li>
					<li v-for="(item, index) in navList"
						class="sn-item"
						@click="getCate(index+1)" 
					>
						<img v-lazy="item.image">
						<p :class="{'active': currentID === index+1}">{{item.title}}</p>
					</li>
				</ul>
			</div>
		</transition>
		<Scroll :on-refresh="onRefresh" 
			:on-infinite="onInfinite" 
			:loadingText = "loadingText" 
			@topshow="topshow"
			:scrollNum="scrollNum"
			v-if="isLoadDom"
		>
			<div v-for="(item, index) in allList">
				<div class="banner"
					id="banner"
					v-if="item.module_type == 'focus'"
				>
					<swiper :options="swiperOption">
						<swiper-slide v-for="(banner, index) in item.extend_data"
							:key="index"
							v-if="item.extend_data.length > 0"
						>
							<img v-lazy="banner.image_full" 
								:key="banner.image_full"
								@click="goSea(banner.page_name,banner.type,banner.page)"
							/>
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="midNav" v-if="item.module_type == 'eye'">
					<div class="midNav-item"
						v-for="(midN, index) in item.extend_data"
						:class="{active: item.extend_type == 4 || item.extend_type == 8 }"
						@click="goSea(midN.page_name,midN.type,midN.page)"
					>
						<img v-lazy="midN.image_full" />
						<p>{{midN.name}}</p>
					</div>
				</div>
				<div class="new" v-if="item.module_type=='pic'">
					<!--一张图片-->
					<div v-if="item.extend_type==1" 
						v-for="(img, index) in item.extend_data" 
						class="one"
						:class="{active: item.margin == 1}"
					>
						<img v-lazy="img.image_full" 
							@click="goSea(img.page_name,img.type,img.page)"
						/>
					</div>
					<!--左一右二-->
					<div class="new-content" :class="{active: item.margin == 1}"
						v-if="item.extend_type==3"
					>
						<img v-for="(newcon, index) in  item.extend_data"
							v-lazy="newcon.image_full"
							:key="newcon.image_full"
							@click="goSea(newcon.page_name,newcon.type,newcon.page)" 
						/>
						<div class="clear"></div>
					</div>
					<!--左二右一-->
					<div class="new-content2" :class="{active: item.margin == 1}"
						v-if="item.extend_type==4"
					>
						<img v-for="(newcon, index) in  item.extend_data"
							v-lazy="newcon.image_full"
							:key="newcon.image_full"
							@click="goSea(newcon.page_name,newcon.type,newcon.page)" 
						/>
						<div class="clear"></div>
					</div>
					<!--左一右一-->
					<div class="new-footer" :class="{active: item.margin == 1}"
						v-if="item.extend_type==2"
					>
						<img v-for="(newfoo, index) in item.extend_data"
							v-lazy="newfoo.image_full"
							:key="newfoo.image_full"
							@click="goSea(newfoo.page_name,newfoo.type,newfoo.page)" 
						/>
					</div>
				</div>
			</div>			
			<div class="pro-top" v-if="proTopImg">
				<img v-lazy="proTopImg" />
			</div>
			<GoodOne :goodsList=goodsList id="goods" :mobile=mobile></GoodOne>			
		</Scroll>
		<div class="station"></div>
		<BotNav :cateindex=0 v-show="isTab && isLoadDom"></BotNav>				
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>	
</template>
<script>
	import axios from 'axios'
	import Http from '../http.js'
	import BotNav from '../components/BotNav.vue'
	import GoTop from '../components/GoTop.vue'
	import GoodOne from '../components/goods_one.vue'
	import * as types from '../store/types.js'
	import { Toast } from 'mint-ui'
	import Scroll from '../components/my_scroll.vue'
	export default{
		components: {
			BotNav,
			GoTop,
			GoodOne,
			Scroll
		},
		inject: ['reload'],
		data(){
			return{
				currentID: 0,
				isCate: false,
				topclass: false,
				isTab: true,
				scrollNum: 3, 
				loadingText: '加载中...',
				fixclass: false,
				isSlide: false,
				selectedId: 0,
				options:{
					activeColor: '#fff',
					additionalX: 70,
					reBoundExponent: 20
				},
				swiperOption: {
					// loop: true,
					loopAdditionalSlides: 1,
					autoplay: {
					    delay: 3000,
					    stopOnLastSlide: false,
					    disableOnInteraction: false,
				    },
				    effect : 'fade',
		          	pagination: {
		            	el: '.swiper-pagination',
		            	dynamicBullets: true
		          	}
		        },
				items: [
				{
					label: '全部'
				}],
				navList: [],
				proTopImg: '',
				infoList: [],
				goodsList: [],
				botList: [],
				page: 1,
				num: 1,
				type: 1,
				cate_id: 0,
				sector_id: 1,
				indexUrl: 'index/index',
				indexInfoUrl: 'wechat/wechatcfg',
				navUrl: 'index/category',
				isMargin: 0,
				colorLeft: '',
				colorRight: '',
				colorMid: '',
				allList: [],
				wx_index_login: 1,
				wx_login: 1,
				userInfo: [],
				mobile: '',
				isLoadDom: false
			}
		},
		beforeMount(){
			//判断是否是微信浏览器的函数
			function isWeiXin(){
				//window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
				var ua = window.navigator.userAgent.toLowerCase();
				//通过正则表达式匹配ua中是否含有MicroMessenger字符串
				if(ua.match(/MicroMessenger/i) == 'micromessenger'){
					return true;
				}else{
					return false;
				}
			}
			var first = window.localStorage.getItem("isFirst")
			var fir = window.localStorage.getItem("fir")
			var tt = window.localStorage.getItem("token")
	
			if(!first && isWeiXin()){
				window.location.href = "http://" + window
				.location.host + "/api/user/wxweblogin?client=weixin"
				window.localStorage.setItem("isFirst", 1)
			}else if(fir == 1 && !isWeiXin()){
				Toast("如需微信登录，请在微信内打开网页")
				window.localStorage.setItem("fir", 2)
			}
			axios.post(this.indexInfoUrl) 
                .then( res => {
                    var ret = res.data;               
                    if(ret.code == 1){
	                    this.infoList = ret['data']['appcfg'];
	                    this.botList = ret['data']['footer']['extend_data'];
	                    var array = ret['data']['index'];
	                    this.allList = array;
                    	var str = JSON.stringify(this.botList);
                    	window.localStorage.setItem("botList", str);
                    	this.$store.commit(types.TITLE, this.infoList.app_sharetitle);
                    	window.localStorage.setItem("app_name", this.infoList.app_name);
                    	window.localStorage.setItem("agent_disname", this.infoList.agent_disname);
                    	window.localStorage.setItem("team_disname", this.infoList.team_disname);
                    	window.localStorage.setItem("withdraw_day", this.infoList.withdraw_day);
                    	window.localStorage.setItem("recommend_image", this.infoList.recommend_image);
                    	window.localStorage.setItem("invite_require_code", this.infoList.invite_require_code);
                    	window.localStorage.setItem("sign_mode", this.infoList.sign_mode);
                    	window.localStorage.setItem("wxpay_bool", this.infoList.wxpay_bool);
                    	window.localStorage.setItem("alipay_bool", this.infoList.alipay_bool);
                    	window.localStorage.setItem("team_bool", this.infoList.team_bool);
                    	window.localStorage.setItem("pdd_bool", this.infoList.pdd_bool);
                    	window.localStorage.setItem("jd_bool", this.infoList.jd_bool);
                    	window.localStorage.setItem("taobao_search_mode", this.infoList.taobao_search_mode);
                    	window.localStorage.setItem("app_desc", this.infoList.app_desc);
                    	window.localStorage.setItem("app_logo_image", this.infoList.app_logo_image);
                    	window.localStorage.setItem("left", this.infoList.template_color_start);
                    	window.localStorage.setItem("right", this.infoList.template_color_end);
                    	window.localStorage.setItem("mid", this.infoList.template_color_ci);
                    	window.localStorage.setItem("jifenbao_name", this.infoList.commission_jifenbao_name);
                    	window.localStorage.setItem("unit", this.infoList.commission_jifenbao_unit);
                    	window.localStorage.setItem("rate", this.infoList.commission_jifenbao_rate);
                    	window.localStorage.setItem("min", this.infoList.withdraw_jifenbao_min);
                    	window.localStorage.setItem("bei", this.withdraw_jifenbao_bei);
                    	window.localStorage.setItem("loading", this.infoList.loading_image);
                    	window.localStorage.setItem("wx_index_login", this.infoList.wx_index_login);
                    	window.localStorage.setItem("wx_login", this.infoList.wx_login);
                    	window.localStorage.setItem("agent_upgrade_banner", this.infoList.agent_upgrade_banner);
                    	this.colorLeft = this.infoList.template_color_start;
                    	this.colorRight = this.infoList.template_color_end;
                    	this.colorMid = this.infoList.template_color_ci;
                    	this.wx_index_login = this.infoList.wx_index_login;                   	
                    	this.wx_login = this.infoList.wx_login;                	
                    	var eyesList = ret['data']['index'];
                    	var self = this;
                    	document.title = self.infoList.app_name + '首页'
                    	if (eyesList) {
                    		eyesList.forEach(function(value, index, array) {
	                            if (value.module_type == 'goods') {
	                                self.num = value.extend_type;
	                                self.getIndexData();
	                            }　　

	                        })
                    	}
                    	
                        var c = location.href;
						var str = c.indexOf("=");
						var gg = c.includes('key');
                        if (this.wx_index_login == 1 && this.wx_login == 1) {							
							if (!tt && !gg) {
								window.location.href = "http://" + window
								.location.host + "/api/user/wxweblogin?client=weixin"

								// window.location.href = "http://wx.huajuanyun.com/api/user/wxweblogin?client=weixin"
							}else if (gg && !tt) {			
								var tok = c.substring(str+1, c.length);
								window.localStorage.setItem('token', tok);
								this.$store.commit(types.LOGIN, tok);
								window.location.href = '/wx_web/'
							}
						}else if(this.wx_index_login == 0 && this.wx_login == 1){
							if (gg && !tt) {	
								var tok = c.substring(str+1, c.length);
								window.localStorage.setItem('token', tok);
								this.$store.commit(types.LOGIN, tok);
								window.location.href = '/wx_web/'
							}
						}	
                    }                 
                })
			// this.getNavData();
		},
		watch: {
		    '$route' (to, from) {
		    	this.$router.go(0);
			}
		},
		beforeRouteEnter(to,from,next){
			if (from.name == '登录') {
				window.history.go(0);
			}
			next()
		},
		mounted(){
			var self = this;
			document.getElementById('help').style.display="none";
			let x = document.getElementsByClassName("ly-tab-item-label");
			if (x[0]) {
				x[0].style.fontWeight="bold";
				x[0].style.fontSize="0.28rem";
			}			
			axios.post(Http.USERIDEX)
				.then( res => {
					const ret =res.data;
					if(ret.code == 1){
						this.userInfo = ret['data'];
						this.mobile = this.userInfo.mobile;
						window.localStorage.setItem("userinfo", this.userInfo)
					}				
				})
			// document.body.ontouchmove = function (e) {
   //              e.preventDefault();
   //          };
			var startY,moveEndY,Y
			$("body").on("touchstart", function(e) {

		// 　　　　e.preventDefault();
		　　　　startY = e.originalEvent.changedTouches[0].pageY;
		　　});
		　　$("body").on("touchmove", function(e) {
				// e.preventDefault();
				moveEndY = e.originalEvent.changedTouches[0].pageY,
				Y = moveEndY - startY;
				if ( Y > 0 ) {
					self.isTab = true;
				}
				else{
					self.isTab = false;
				}
			});
		},
		updated(){
			this.isLoadDom = true;
		},
		methods: {
			topshow: function(a){
		    	this.topclass = a;
		    },
			onRefresh(done) {
				// this.reload();
            	document.getElementById('help').style.display="none";
	            this.getIndexData();
				this.getInfoData();
				// this.getNavData();
	            done();
	            Toast({
				    message: '刷新完成',
				    position: 'bottom',
				    duration: 500
				});     
		    },
		    onInfinite(done) {
		    	document.getElementById('help').style.display="none";
		    	document.querySelector('.load-more').style.display = 'block';
		    	let vm = this;
		    	var params = new URLSearchParams();
                params.append('page', vm.page);
                params.append('sector_id', vm.num); 
                params.append('cate_id', vm.cate_id); 
                axios.post(vm.indexUrl,params).then( res =>{
					var ret = res.data;
					var arr = ret['data']['list'];
					this.goodsList = this.goodsList.concat(arr);
					if (arr.length > 9) {
						vm.page ++;
						// vm.$el.querySelector('.load-more').style.display = 'none';
						done() // call done
					}else{
						vm.loadingText = "加载完毕";
						document.querySelector('.load-more').style.display = 'none';
					}
				})
		    },
			goMsg: function(){
				this.$router.push('message')
			},
			goSearch: function(){
				this.$router.push('search')
			},
			goSea: function(keyword,type,page){
				var token = window.localStorage.getItem("token");
				if (!token) {
					if (this.wx_login == 1) {
						this.$router.push('/auther');
					}else{
						this.$router.push('/login');
					}
				}else if (token && !this.mobile) {
					this.$router.push('/bind/phone');
				}else{
					if(type == 'wechat'){
						this.$router.push(page)					
					}else if(type == 'goods'){
						this.$router.push('/indexgoodssearch/' + page)				
					}else if (type == 'outlink') {
						window.location.href = page
					}else if (type == 'goods_custom') {
						this.$router.push({
							path: '/product/detail/' + page,
							query: {
		                        type: 1,
		                        is_collect: 0
							}
						})
					}
				}
				
			},
            handleChange: function(item, index){
            	document.getElementById("goods").scrollIntoView();
            	this.currentID = index;
            	let x = document.getElementsByClassName("ly-tab-item-label");
            	for( var i = 0;i < x.length; i++){
            		if(i === index){
            			x[index].style.fontWeight="bold";
            			x[index].style.color = "#fff";
            			x[index].style.fontSize="0.28rem";
            		}else if(i !== index){
            			x[i].style.fontWeight="100";
            			x[i].style.color = "rgba(256,256,256,0.8)";
            			x[i].style.fontSize="0.24rem";
            		}
            	}
            	if (index== 0) {
            		this.cate_id = 0
            	}else{
            		this.cate_id = this.navList[index-1].id;
            	}           	
            	this.page = 1;
            	var params = new URLSearchParams();
                params.append('page', this.page);
                params.append('sector_id', this.num); 
                params.append('cate_id', this.cate_id); 
                axios.post(this.indexUrl,params)
                .then( res => {
                    var ret = res.data;
                    this.goodsList = ret['data']['list']
                })
            },
            getCate: function(index){
            	document.getElementById("goods").scrollIntoView();
            	this.currentID = index;
            	this.isSlide =false;
            	let x = document.getElementsByClassName("ly-tab-item-label");
            	for( var i = 0;i < x.length; i++){
            		if(i === index){
            			x[index].style.fontWeight="bold";
            			x[index].style.fontSize="0.28rem";
            			x[index].style.color = "#fff";
            		}else if(i !== index){
            			x[i].style.fontWeight="100";
            			x[i].style.fontSize="0.24rem";
            			x[i].style.color = "rgba(256,256,256,0.8)";
            		}
            	}
            	this.page = 1;
            	if (index== 0) {
            		this.cate_id = 0
            	}else{
            		this.cate_id = this.navList[index-1].id;
            	} 
            	var params = new URLSearchParams();
                params.append('page', this.page);
                params.append('sector_id', this.num); 
                params.append('cate_id', this.cate_id); 
                axios.post(this.indexUrl,params)
                .then( res => {
                    var ret = res.data;
                    this.goodsList = ret['data']['list']
                })
            },
            goTop: function(){
                document.getElementById("banner").scrollIntoView()
            },
			showSlide(){
				this.isSlide = !this.isSlide;
			},
			getInfoData(){
				axios.post(this.indexInfoUrl) 
                .then( res => {
                    var ret = res.data;               
                    if(ret.code == 1){
	                    this.infoList = ret['data']['appcfg'];
	                    this.botList = ret['data']['footer']['extend_data'];
	                    var array = ret['data']['index'];
	                    this.allList = array;
                    	var str = JSON.stringify(this.botList);
                    	window.localStorage.setItem("botList", str);
                    	this.$store.commit(types.TITLE, this.infoList.app_sharetitle);
                    	window.localStorage.setItem("app_name", this.infoList.app_name);
                    	window.localStorage.setItem("agent_disname", this.infoList.agent_disname);
                    	window.localStorage.setItem("team_disname", this.infoList.team_disname);
                    	window.localStorage.setItem("withdraw_day", this.infoList.withdraw_day);
                    	window.localStorage.setItem("recommend_image", this.infoList.recommend_image);
                    	window.localStorage.setItem("invite_require_code", this.infoList.invite_require_code);
                    	window.localStorage.setItem("sign_mode", this.infoList.sign_mode);
                    	window.localStorage.setItem("wxpay_bool", this.infoList.wxpay_bool);
                    	window.localStorage.setItem("alipay_bool", this.infoList.alipay_bool);
                    	window.localStorage.setItem("team_bool", this.infoList.team_bool);
                    	window.localStorage.setItem("pdd_bool", this.infoList.pdd_bool);
                    	window.localStorage.setItem("jd_bool", this.infoList.jd_bool);
                    	window.localStorage.setItem("taobao_search_mode", this.infoList.taobao_search_mode);
                    	window.localStorage.setItem("app_desc", this.infoList.app_desc);
                    	window.localStorage.setItem("app_logo_image", this.infoList.app_logo_image);
                    	window.localStorage.setItem("left", this.infoList.template_color_start);
                    	window.localStorage.setItem("right", this.infoList.template_color_end);
                    	window.localStorage.setItem("mid", this.infoList.template_color_ci);
                    	window.localStorage.setItem("jifenbao_name", this.infoList.commission_jifenbao_name);
                    	window.localStorage.setItem("unit", this.infoList.commission_jifenbao_unit);
                    	window.localStorage.setItem("rate", this.infoList.commission_jifenbao_rate);
                    	window.localStorage.setItem("min", this.infoList.withdraw_jifenbao_min);
                    	window.localStorage.setItem("bei", this.withdraw_jifenbao_bei);
                    	window.localStorage.setItem("loading", this.infoList.loading_image);
                    	window.localStorage.setItem("wx_index_login", this.infoList.wx_index_login);
                    	window.localStorage.setItem("wx_login", this.infoList.wx_login);
                    	window.localStorage.setItem("agent_upgrade_banner", this.infoList.agent_upgrade_banner);
                    	this.colorLeft = this.infoList.template_color_start;
                    	this.colorRight = this.infoList.template_color_end;
                    	this.colorMid = this.infoList.template_color_ci;
                    	this.wx_index_login = this.infoList.wx_index_login;                   	
                    	this.wx_login = this.infoList.wx_login;                	
                    	var eyesList = ret['data']['index'];
                    	var self = this;
                    	document.title = self.infoList.app_name + '首页'
                    	if (eyesList) {
                    		eyesList.forEach(function(value, index, array) {
	                            if (value.module_type == 'goods') {
	                                self.num = value.extend_type;
	                                self.getIndexData();
	                            }　　

	                        })
                    	}
                    }               
                })
			},
			getIndexData(){
                var params = new URLSearchParams();
                params.append('page', this.page);
                params.append('sector_id', this.num); 
                params.append('cate_id', this.cate_id); 
                axios.post(this.indexUrl,params)
                .then( res => {
                    var ret = res.data;
                    if (ret.code == 1) {                    	
	                    this.goodsList = ret['data']['list'];
	                    this.indexList = ret['data'];
	                    this.navList = ret['data']['category'];
	                    for(var i=0;i<this.navList.length;i++){
	                    	this.items.push({label: this.navList[i].title})
	                    }
	                    this.items.push({label: ''},{label: ''});
	                    this.page = 2;
	                    if (ret['data']['images']) {
	                    	this.proTopImg = ret['data']['images'][0];
	                    }                   	
                    }
                    
                })
			},
		},
		destroyed: function () {//离开该页面需要移除这个监听的事件
            window.removeEventListener('scroll', this.handleScroll);
        }
	}
</script>
<style lang="scss" scoped>
.index{
	width: 100%;
	overflow: hidden;
	touch-action: none;
	.header{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 88;
		width: 100%;
		height: 0.88rem;
		// background: linear-gradient(to right,rgb(255,101,68), $color);
		.header-left,.header-right{
			position: absolute;
			top: 0;
			z-index: 99;
			width: 0.88rem;
			height: 0.88rem;
			text-align: center;
			line-height: 0.88rem;
			.iconfont{
				font-size: 0.44rem;
				color: #fff;
				font-weight: 100;
			}
			img{
				width: 0.44rem;
			}
		}
		.header-search{
			margin: 0.14rem 0.24rem;
			height: 0.6rem;
			line-height: 0.6rem;
			border-radius: 0.6rem;
			background: rgba(0,0,0,0.2);
			color: rgba(256,256,256,0.8);
		}
		.header-right{
			right: 0;
			.iconfont{
				font-size: 0.34rem;
				font-weight: 100;
			}
		}
	}
	.index-nav{
		position: fixed;
		top: 0.88rem;
		width: 100%;
		height: 0.6rem;
		z-index: 99;
		.nav-btn{
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			width: 0.6rem;
			height: 0.6rem;
			line-height: 0.6rem;
			text-align: center;
			background: rgb(42, 62, 69);
			.iconfont{
				font-size: 0.34rem;
				color: #fff;
			}
		}
	}
	.slide-nav{
		position: absolute;
		top: 1.48rem;
		left: 0;
		z-index: 1;
		width: 100%;
		background: #fff;
		box-shadow: 0 0.06rem 0.1rem #b4b4b4;
		.sn-header{
			position: relative;
			height: 0.88rem;
			line-height: 0.88rem;
			font-size: 0.28rem;
			.iconfont{
				position: absolute;
				top: 0;
				right: 0;
				width: 0.88rem;
				height: 0.88rem;
				text-align: center;
				font-size: 0.34rem;
			}
		}
		.sn-content{
			padding: 4%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.sn-item{
				flex: 0 0 25%;
				img{
					width: 1rem;
					height: 1rem;
					margin-bottom: 0.2rem;
				}
				p{
					margin-bottom: 0.4rem;
					color: #999;
					&.active{
						color: $color;
					}
				}
			}
		}
	}
	.station{
		display: block;
		width: 100%;
		height: 0.88rem;
	}
	.banner{
		width: 100%;
		height: 3rem;
		background-size: 40%;
		img{
			width: 100%;
			height: 100%;
		}
		.swiper-container{
			height: 3rem;
		}
	}
	.midNav{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		padding-bottom: 0.2rem;
		background: #fff;
		.midNav-item{
			margin-top: 0.2rem;
			flex: 0 0 20%;
			&.active{
				flex: 0 0 25%;
				width: 25%;
			}
			img{
				margin-bottom: 0.10rem;
				width: 0.8rem;
				height: 0.8rem;
			}
		}
	}
	.new{
		width: 100%;
		.one{
			&.active{
				margin-top: 0.2rem;
			}
			img{
				width: 100%;
			}
		}
		
		.new-content{
			width: 100%;
			&.active{
				margin-top: 0.2rem;
			}
			img{
				float: left;
				width: 50%;
			}
		}
		.new-content2{
			position: relative;
			width: 100%;
			&.active{
				margin-top: 0.2rem;
			}
			img{
				width: 50%;
				float: left;
				&:nth-of-type(2){
					position: absolute;
					top: 50%;
					left: 0;
				}
			}
		}
		.new-footer{
			&.active{
				margin-top: 0.2rem;
			}
			width: 100%;
			img{
				width: 50%;
			}
		}
	}
	.pro-top{
		margin-top: 0.2rem;
		width: 100%;
		img{
			width: 100%;
		}
	}
}
</style>